<template>
       <div class="swiper-container" id="mySwiper" ref="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in slideList" :key="banner.id">
              <img :src="banner.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
name:"Swiper",
props:["slideList","loop"],
methods:{
    initSwiper(){
         new Swiper(this.$refs.swiper, {
        // direction: "vertical", // 垂直切换选项
        loop: this.loop, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable:true
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }
},
watch:{
   slideList:{
    immediate:true,
    handler(){
            this.$nextTick(()=>{
              if(this.slideList.length<0) return
                // 初始swiper
                this.initSwiper()
            })
       
    }
   } 
}
}
</script>

<style>

</style>